<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
		<meta name="format-detection" content="telephone=no">
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
		<title></title>
		<script type="text/javascript" src="../js/localstorage.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/zTreeStyle.css">
		<link rel="stylesheet" href="../css/Stylesheet.css">
		<script type="text/javascript" src="../js/jquery.js"></script>
		<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>		
		<script src="../js/highcharts.js"></script>

		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			
			button.button,
			tr td button {
				padding: 2px 5px;
				margin: 0px 3px;
				background: #009bce;
				border-radius: 4px;
				border: 1px;
				color: #fff;
			}
			
			#tree {
				width: 140px;
				display: none;
				position: absolute;
				background: #fff;
			}
			
			#list {
				position: absolute;
				right: 0px;
				margin-top: 20px;
				width: 200px;
				background: #eaeaea;
			}
		</style>

		<script type="text/javascript">
			// tree节点点击事件  name为这个节点的值
			function zTreeOnClick(event, treeId, treeNode) {
				$("#site").val(treeNode.name);
			};
			var setting = {
				callback: {
					onClick: zTreeOnClick
				}
			};
			var zNodes = [{
				name: "香港",
				open: true,
				children: [{
						name: "九龙区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "旺角区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "西贡区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "油尖旺区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					},
					{
						name: "深水埗区",
						open: true,
						children: [
							{ name: "场所A" },
							{ name: "场所B" },
							{ name: "场所C" }
						]
					}
				]
			}];
			$(function() {
				$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			})
		</script>
		<script type="text/javascript">
			$(function() {

				$("div").click(function(e) {
					var id = $(this).attr("id");
					if(id == "aaa") {
						return false;
					} else if(id == "tree") {
						return false;
					} else {
						$("#tree").slideUp(300);
					}

				})

				$("#site").click(function(e) {
					$("#tree").slideDown(300);
				})

				// $("#site").blur(function(e){
				//  $("#tree").slideUp(300);
				// })
				$("#tree").hover(function() {}, function() {
					$("#tree").slideUp(300);
					// $("#site").blur();
				})
			})
		</script>
	</head>

	<body>

		<div class="pageheader">
			<div class="clear"></div>
			<!-- <img src="/Icons/chengban.png" alt="Customers" title="Customers"> -->
			<h1><script>document.write(language.Visitor_quantity_trend_map)</script></h1>
		</div>

		<div class="listFilter">
			<h2><script>document.write(language.Filter)</script><span class="tooltip" style="display: none;"><em>(筛选下表)</em></span></h2>
			<!-- <a href="#" class="tooltoggle">显示/隐藏工具提示</a> -->
			<div class="divider"></div>
			<table width="100%">
				<tbody>

					<tr>
						<td class="FormLabel">
							<script>
								document.write(language.Date_Filters)
							</script>
						</td>
						<td>
							<input type="date" id="">&nbsp;&nbsp;&nbsp;&nbsp;
							<script>
								document.write(language.to)
							</script>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="date" id=""> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<button>
                            <script>
                            document.write(language.Filter)
                            </script>
                        </button>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="formSubmit">
				<!-- <button class='button'><script>document.write(language.Filter)</script></button> -->
				<!-- <button class='button'><script>document.write(language.remove)</script></button> -->
			</div>
		</div>

		<div class="reportResults">
			<div id="water_level" style="width: 100%; height: 358px;"></div>
		</div>
		<script>
			function highchar(type, name, data, time, unit) {

				$(type).highcharts({
					title: {
						text: language.Visitor_quantity_trend_map,
						x: -20 //center
					},

					xAxis: {
						categories: time,
						min: 0,
						max: 12
					},
					scrollbar: {
						enabled: true
					},
					yAxis: {
						title: {
							text: name + '(' + unit + ')'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						valueSuffix: unit
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'middle',
						borderWidth: 0
					},
					credits: {
						enabled: false
					},
					series: [{
						name: name,
						data: data
					}]
				});
			}
			var water_level = '#water_level';
		var waterName = language.fangke_yufang;
		var water_data=[7, 6, 9, 14, 18, 21, 25,26, 23, 18, 13, 23, 18];
		var water_time=['2017/2/1', '2017/2/2', '2017/2/3', '2017/2/4', '2017/2/5', '2017/2/6','2017/2/7', '2017/2/8', '2017/2/9', '2017/2/10', '2017/2/11', '2017/2/12', '2017/2/13'];
		highchar(water_level, waterName,water_data,water_time,language.people);
		</script>
		<!-- <div class="k-overlay"></div> -->
		<!-- 
		<div class="content">
			<table style="border-spacing:0px;">
				<thead>
					<tr>
						<td colspan="2" style="text-align:left;line-height: 40px;font-weight: bold;padding-left: 30px;">新增承办商</td>
						<td colspan="2" style="text-align:right;line-height: 40px;"><button onclick='$(".k-overlay,.content").css("display","none");' style="border:0px;margin:0px;">X</button></td>
					</tr>
				</thead>
				<tbody>
					<tr style="line-height: 10px;">
						<td colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td>承办商:</td>
						<td><input type="text" placeholder="请输入承办商" /></td>
						<td>负责人:</td>
						<td><input type="text" placeholder="请输入负责人" /></td>
					</tr>
					<tr>
						<td>证件类别:</td>
						<td>
							<select style="width: 150px;height: 30px;">
								<option>ID card</option>
							</select>
						</td>
						<td>证件号:</td>
						<td><input type="text" placeholder="请输入证件号" /></td>
					</tr>
					<tr>
						<td>移动电话:</td>
						<td><input type="text" placeholder="请输入移动电话" /></td>
						<td>时间:</td>
						<td><input type="data" value="2017-10-24" /></td>
					</tr>
					<tr style="line-height: 10px;">
						<td colspan="4">&nbsp;</td>
					</tr>
				</tbody>
				<tfoot>
					<tr style="line-height: 10px;">
						<td style="border-top: 1px solid #ccc;" colspan="4">&nbsp;</td>
					</tr>
					<tr>
						<td></td>
						<td colspan="3" style="text-align: right;">
							<button onclick='$(".k-overlay,.content").css("display","none");'>取消</button>
							<button onclick='$(".k-overlay,.content").css("display","none");'>保存</button>
						</td>
					</tr>
					<tr style="line-height: 10px;">
						<td colspan="4">&nbsp;</td>
					</tr>
				</tfoot>
			</table>
		</div> -->
	</body>

</html>